
import { Form } from '@ant-design/compatible';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { useState, useRef } from 'react';
import { queryRule } from './service';
import CreateForm from './components/CreateForm';
import styles from './style.less';
import { Alert, Switch , Icon, Button } from 'antd';

/**
 * 生成小程序码
 * @param fields
 */
const genMiniCode = async fields => {

}


/**
 * 切换是否置顶
 * @param fields
 */
const changeIsTop =  async fields => {


}

/**
 * 编辑文章
 * @param fields
 */
const edit  = async fields => {

}

/**
 * 删除
 * @param fields
 */
const del = async fields => {

}

/**
 * 预览
 * @param fields
 */
const preview = async fields => {
  
}


const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const actionRef = useRef();
  const columns = [
    {
      title: '发布时间',
      dataIndex: 'updatedAt',
      sorter: true,
      valueType: 'dateTime',
      className: 'td-text'
    },
    {
      title: '图文封面',
      dataIndex: 'coverImage',
      render: (_, record) => (
        <>
          <div className={styles.cell}>
            <img src={_} />
          </div>
        </>
      )
    },
    {
      title: '图文标题',
      dataIndex: 'title',
      className: 'td-text'
    },
    {
      title: '发布人',
      dataIndex: 'releaser',
      className: 'td-text'
    },
    {
      title: '阅读量',
      dataIndex: 'reading',
    },
    {
      title: '是否显示公司信息',
      dataIndex: 'isShowCompanyInfo',
      render: (_, record) => (
        <Switch defaultChecked  onChange={changeIsTop} />
      )
    },
    {
      title: '是否置顶',
      dataIndex: 'isTop',
      render: (_, record) => (
        <Switch defaultChecked  onChange={changeIsTop} />
      )
    },
    {
      title: '生成小程序码',
      dataIndex: 'genMiniCode',
      valueType: 'option',
      render: (_, record) => (
        <>
          <Button 
            className={styles.genMiniCode}
            type="primary"
            onClick={genMiniCode}>
              生成小程序码
          </Button>
        </>
      )
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <Button 
            onClick={preview}
            className={styles.preview}
          >
              预览
          </Button>
          <Button 
            onClick={edit}
          >
              编辑
          </Button>
          <Button 
            onClick={del}
            type="danger"
            className={styles['danger--mr']}
          >
              删除
          </Button>
        </>
      )
    },
  ]
  return (
    <PageHeaderWrapper>
      <ProTable 
        headerTitle="图文列表"
        actionRef={actionRef}
        rowKey="key"
        request={params => queryRule(params)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button  type="primary" onClick={() => handleModalVisible(true) }>
            <Icon type="plus" />
            新建图文
          </Button>

        ]}
      />
    <CreateForm 
      onSubmit={
        async value => {

        }
      }
      onCancel={() => handleModalVisible(false)}
      modalVisible={createModalVisible}
    />
    </PageHeaderWrapper>
  )
}


export default Form.create()(TableList);
